shlinkio / shlink-web-client

  render() {

    const { importServersFromFile } = serversImporter;

    const { onImport, createServers } = this.props;

    const onChange = ({ target }) =>

      importServersFromFile(target.files[0])

        .then(createServers)

        .then(onImport)

        .then(() => {

          // Reset input after processing file

          target.value = null;

        });

    return (

      <React.Fragment>

        <button

          type="button"

          className="btn btn-outline-secondary mr-2"

          id="importBtn"

          onClick={() => this.fileRef.current.click()}

        >

          Import from file

        </button>

        <UncontrolledTooltip placement="top" target="importBtn">

          You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>

        </UncontrolledTooltip>

        <input

          type="file"

          accept="text/csv"

          className="create-server__csv-select"

          ref={this.fileRef}

          onChange={onChange}

        />

      </React.Fragment>